<template>
  <a-table :columns="columns" :data-source="data" :pagination="false" bordered>
    <template #summary>
      <a-table-summary-row>
        <a-table-summary-cell>Total</a-table-summary-cell>
        <a-table-summary-cell v-for="item in totals">
          <a-typography-text type="danger">
            {{ item }}
          </a-typography-text>
        </a-table-summary-cell>
        <!-- <a-table-summary-cell>
          <a-typography-text>
            {{ totals.totalRepayment }}
          </a-typography-text>
        </a-table-summary-cell> -->
      </a-table-summary-row>
      <a-table-summary-row>
        <a-table-summary-cell>Balance</a-table-summary-cell>
        <a-table-summary-cell :col-span="2">
          <a-typography-text type="danger">
            {{ totals.totalBorrow - totals.totalRepayment }}
          </a-typography-text>
        </a-table-summary-cell>
      </a-table-summary-row>
    </template>
  </a-table>
  <br />
  <a-table
    :columns="fixedColumns"
    :data-source="fixedData"
    :pagination="false"
    :scroll="{ x: 2000, y: 500 }"
    bordered
  >
    <template #summary>
      <a-table-summary fixed>
        <a-table-summary-row>
          <a-table-summary-cell :index="0">Summary</a-table-summary-cell>
          <a-table-summary-cell :index="1"
            >This is a summary content</a-table-summary-cell
          >
        </a-table-summary-row>
      </a-table-summary>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import type { TableColumnsType } from "ant-design-vue";
import { computed, ref } from "vue";

const columns = ref<TableColumnsType>([
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Borrow",
    dataIndex: "borrow",
  },
  {
    title: "Repayment",
    dataIndex: "repayment",
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Math",
    dataIndex: "math",
  },
  {
    title: "Science",
    dataIndex: "science",
  },
  {
    title: "Cn",
    dataIndex: "cn",
  },
  {
    title: "En",
    dataIndex: "en",
  },
]);

const data = ref([
  {
    key: "1",
    name: "John Brown",
    borrow: 10,
    repayment: 33,
    age: 32,
    math: 99,
    science: 89,
    cn: 70,
    en: 60,
  },
  {
    key: "2",
    name: "Jim Green",
    borrow: 100,
    repayment: 0,
    age: 42,
    math: 70,
    science: 60,
    cn: 90,
    en: 50,
  },
  {
    key: "3",
    name: "Joe Black",
    borrow: 10,
    repayment: 10,
    age: 32,
    math: 60,
    science: 70,
    cn: 80,
    en: 90,
  },
  {
    key: "4",
    name: "Jim Red",
    borrow: 75,
    repayment: 45,
    age: 18,
    math: 88,
    science: 77,
    cn: 66,
    en: 55,
  },
]);

const fixedColumns = ref<TableColumnsType>([
  {
    title: "Name",
    dataIndex: "name",
    fixed: true,
    width: 100,
  },
  {
    title: "Description",
    dataIndex: "description",
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Borrow",
    dataIndex: "borrow",
  },
  {
    title: "Repayment",
    dataIndex: "repayment",
  },
]);

const fixedData = ref<{ key: number; name: string; description: string }[]>([]);
for (let i = 0; i < 20; i += 1) {
  fixedData.value.push({
    key: i,
    name: ["Light", "Bamboo", "Little"][i % 3],
    description: "Everything that has a beginning, has an end.",
  });
}

const totals = computed(() => {
  let totalBorrow = 0;
  let totalRepayment = 0;
  let totalAge = 0;
  let totalMath = 0;
  let totalScience = 0;
  let totalCn = 0;
  let totalEn = 0;

  data.value.forEach(({ borrow, repayment, age, math, science, cn, en }) => {
    totalBorrow += borrow;
    totalRepayment += repayment;
    totalAge += age;
    totalMath += math;
    totalScience += science;
    totalCn += cn;
    totalEn += en;
  });
  return { totalBorrow, totalRepayment, totalAge, totalMath, totalScience, totalCn, totalEn };
});
</script>
<style>
#components-table-demo-summary tfoot th,
#components-table-demo-summary tfoot td {
  background: #fafafa;
}
[data-theme="dark"] #components-table-demo-summary tfoot th,
[data-theme="dark"] #components-table-demo-summary tfoot td {
  background: #1d1d1d;
}
</style>
